<template>
	<view class="mainpadding">
		<u-popup :show="show" @close="close">
			<view class="dingwei" style="background: rgba(0,0,0,0.5);">
				<view class="tupian">
					<image src="../static/image/system/qdcg.png" mode=""></image>
				</view>
				<view class="guanbi" @click="close">
					<u-icon name="close" color="#fff"></u-icon>
				</view>		
			</view>
		</u-popup>
		<view class="sanshier fonweight xiaohei">总积分：{{userInfo.score}}</view>
		<view class="block margin_top2">
			<view class="flexleft" >
				<view class="touxoagm margin_right2">
					<image src="../static/image/system/huiyuan.png" mode=""></image>
				</view>
				<view class="ershiba nofonweight xiaobai">已连续签到{{dataAll.sign_num}}天</view>
			</view>
			<view class="margin_top2">
				<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' :collapsible="false"
					@onDayClick='onDayClick' @changeyue="changeyue"></ren-calendar>
			</view>
		</view>
		<view class="flexright margin_top">
			<view class="flexleft margin_right4">
				<view class="lvdian margin_right1"></view>
				<view class="strongtext xiaohei nofonweight">已签到</view>
			</view>
			<view class="flexleft">
				<view class="huand margin_right1"></view>
				<view class="strongtext xiaohei nofonweight">当前日期</view>
			</view>
		</view>
		<view class="flexright margin_top2">
			<view class="chengdian margin_right1"></view>
			<view class="strongtext xiaohei nofonweight">未签到</view>
			<view class="strongtext xiaohui nofonweight">（注：可免费补卡{{dataAll.sybk_num}}次）</view>
		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" v-if="!dataAll.now_sign_status && today==curDate" @click="qiandao">签到</view>
			<view class="bigbtn" v-if="!dataAll.now_sign_status && today!=curDate" @click="qiandao">补签</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				markDays: [],//签到的时间
				show: false,
				userInfo:{},
				dataAll:{},
				curDate:"",
				today:"",//今天
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.today = today
			this.getqdDay(today.slice(0, 7))
			this.getqdmsg()
		},
		onShow() {
			this.userinfomsg()
		},
		methods: {
			qiandao(){
				httpRequest.request('/api/user/userSign', 'POST', {
					date:this.curDate
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.getqdmsg()
						this.getqdDay(this.curDate.slice(0, 7))
					}
				})
			},
			getqdDay(date){
				uni.showLoading({
					title:"请稍后"
				})
				httpRequest.request('/api/user/getMouthDay', 'POST', {
					date
				}, false, false, true).then(res => {
					let arr = []
					res.data.forEach(item=>{
						if(item.sign_status){
							arr.push(item.date)
						}
					})
					this.markDays = arr
					uni.hideLoading()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getqdmsg() {
				uni.showLoading({
					title:"请稍后"
				})
				httpRequest.request('/api/user/signData', 'GET', {
					date:this.curDate
				}).then(res => {
					this.dataAll = res.data
					uni.hideLoading()
				})
			},
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			close() {
				this.show = false
			},
			changeyue(e) {
				this.getqdDay(e)
			},
			onDayClick(e) {
				this.curDate = e.date
				this.getqdmsg()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.guanbi{
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
	.tupian {
		width: 100%;
		height: 1313rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.chengdian {
		width: 16rpx;
		height: 16rpx;
		background: #F8B900;
		border-radius: 50%;
	}

	.huand {
		width: 16rpx;
		height: 16rpx;
		background: #F76222;
		border-radius: 50%;
	}

	.lvdian {
		width: 16rpx;
		height: 16rpx;
		background: #1BA95B;
		border-radius: 50%;
	}

	.touxoagm {
		width: 60rpx;
		height: 60rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.block {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 30rpx 20rpx;
	}
</style>